<template>
    <div class="bodys">
        <div class="top">
            <img src="../../assets/login/loginbg.png" alt="">
        </div>
        <div class="mid">
            <p><img src="../../assets/login/account.png"><input type="text" v-model="userName" :placeholder="$t('ws_sign.enterAmount')"></p>
            <p><img src="../../assets/login/secret.png"><input type="password" v-model="passWord" :placeholder="$t('ws_sign.enterPsd')"></p>
            <el-button type="primary" @click="login">{{$t('ws_sign.landing')}}</el-button>
            <p class="pfunction">
                <span class="pspan" @click="forget">{{$t('ws_sign.forgetPassword')}}</span>
                <span class="pspan" @click="register">{{$t('ws_sign.registerAccount')}}</span>
            </p>
        </div>
        
    </div>
</template>
<script>
import { LoginFn } from '@/api/login';
export default {
    data(){
        return{
            userName:'',
            passWord:''
        }
    },
    methods: {
        register(){
            this.$router.push("/register")
        },
        forget(){
            this.$router.push("/forget")
        },
        login(){
            let data = {
                user_id: this.userName,
                pwd: this.passWord
            }
            LoginFn(data).then(res => {
                if(res.data.msg == 200){
                    sessionStorage.setItem("user",JSON.stringify(res.data.result))
                    console.log(res.data.user);
                    this.$router.push("/index")
                }else{
                    this.$message({
						type: 'error',
						message: "用户名密码不正确！",
						duration: 1500,
						showClose: true
					});
                }
            })
        }
    },
    components:{

    }
}
</script>
<style lang="stylus" scoped>
.bodys{
    overflow: hidden;
    width :100vw;
    height:100vh;
}
.top{
    width:100vw;
    height:32vh;
    >img{
        width:100vw;
        height:32vh;
    }
}
.mid{
    height:30vh;
    margin-top:1rem;
    >P{
        display:flex;
        align-items :center;
        width:80vw;
        margin:.8rem 10vw auto 10vw;
        >img{
            height:28px;
        }
        >input{
            display:inline-block; 
            width:70vw;
            height:6vh;
            font-size:17px;
            outline :none;
            transform: translateY(1%);
            text-indent :.1rem;
            border-bottom:1px solid #c0c4cc;
            border-left :0;
            border-top :0;
            border-right :0;
        }
    }
    .pfunction{
        display: flex;
        justify-content: space-between;
        .pspan{
            font-size:.3rem; 
        }
        width:70vw;
        margin-left:15vw;
        margin-top:.3rem;
        color:#999999
    }
}
.el-button{
    margin-top:1rem;
    width:70vw;
    height :6.5vh;
    margin-left :15vw;
    font-size:.35rem;

}
</style>
